<template>
	<view>
		<nav-bar title="修改预约时间"></nav-bar>
		<scroll-view scroll-y :style="{height:mainHeight}">
			<order-list :notClick="true" :orderList="[orderDetail]" :showSlotBtn="false" :Alltime="Alltime"
				:showDisbursements="false" :showRefund="true" @projectOutOrder="projectOutOrder" @checkItem="clickItem"
				@getDate="getDate"></order-list>
		</scroll-view>
		<view class="btn_edit flexJcac">
			<view class="btn_cont" @click="submitApply">
				修改预约时间
			</view>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/nav-bar/index.vue'
	import OrderList from './components/orderList'
	import OrderCard from './components/orderCard'
	import OtherMessage from './components/otherMessage'
	import YouPopup from '@/components/you-popup2'
	import api_order from '@/api/order'
	import api_home from '@/api/home'
	export default {
		components: {
			NavBar,
			OrderList,
			OrderCard,
			OtherMessage,
			YouPopup
		},
		data() {
			return {
				mainHeight: '',
				params: {},
				Alltime: '',
				currentItem: '',
				show: false,
				selectId: '',
				buzyId: '',
				newDate: '',
				orderId: '',
				orderDetail: {},
				popupVisible: false,
				applyDialog: false,
				outOrder: {},
				outOrderType: ''
			}
		},
		async onLoad(options) {
			this.mainHeight = this.$store.getters.heightData.noTabMainHeight
			this.orderId = options.id
			await this.getOrderDetail()
		},
		methods: {
			async submitApply() {
				const params = {
					...this.params
				}
				if (this.currentItem.status == 2 || this.currentItem.status == 3 || this.currentItem.status == 4 || this.currentItem.status == 5) {
					uni.showToast({
						icon: 'none',
						title: '当前所选项目无法更改预约时间'
					})
				} else if (!params.subscribeStartTime) {
					uni.showToast({
						icon: 'none',
						title: '请选择预约时间'
					})
				} else {
					const res = await api_order.updateTime(params)
					if (res.code == 200) {
						uni.showToast({
							icon: 'success',
							title: '修改成功',
							duration: 2000
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 2000)
					}
				}
			},
			async clickItem(item) {
				console.log(item)
				if (item.status == 2 || item.status == 3 || item.status == 4 || item.status == 5) {
					uni.showToast({
						icon: 'none',
						title: '当前所选项目无法更改预约时间'
					})
				} else {
					this.currentItem = item
					this.selectId = item.technicianId
					const res = await api_order.getAlltiem({
						id: this.selectId,
						orderItemId: item.id
					})
					this.Alltime = res.data
				}
			},
			async getDate(value) {
				console.log('选中时间', value)
				// 创建一个新的Date对象  
				const date = new Date(value.value);
				// 获取年月日时分秒  
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的  
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				const seconds = String(date.getSeconds()).padStart(2, '0');
				const front = `${year}-${month}-${day}`
				const hide = `${hours}:${minutes}`
				const subscribeStartTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
				console.log(front, hide)
				if (this.Alltime.length < 1) {
					console.log(this.currentItem,'this.currentItem');
					let params = {
						id: this.currentItem != ''?this.currentItem.id : this.orderDetail.zyOrderItemList[0].id,
						itemId: this.currentItem != ''?this.currentItem.itemId : this.orderDetail.zyOrderItemList[0].itemId,
						subscribeStartTime: subscribeStartTime,
						technicianId:this.currentItem.technicianId
					}
					this.params = params
				} 
				this.Alltime.map((item) => {
					if (front == item.busyDate) {
						const isRange = this.$methods.isTimeInRange(hide, item.busyTime)
						console.log(isRange)
						if (isRange) {
							uni.showToast({
								icon: 'none',
								title: '请勿选择忙碌时间段'
							})
							return
						} else {
							let params = {
								itemId: this.currentItem != ''?this.currentItem.itemId : this.orderDetail.zyOrderItemList[0].itemId,
								subscribeStartTime: subscribeStartTime
							}
							this.params = params
						}
					} else {
						console.log('111')
						let params = {
							id: this.currentItem != ''?this.currentItem.id : this.orderDetail.zyOrderItemList[0].id,
							itemId: this.currentItem != ''?this.currentItem.itemId : this.orderDetail.zyOrderItemList[0].itemId,
							subscribeStartTime: subscribeStartTime
						}
						this.params = params
					}
					return item
				})
			},
			async getAlltime() {
				this.selectId = this.orderDetail.zyOrderItemList[0].technicianId
				this.buzyId = this.orderDetail.zyOrderItemList[0].id
				const res = await api_order.getAlltiem({
					id: this.selectId,
					orderItemId: this.buzyId
				})
				console.log('忙碌时间', res)
				this.Alltime = res.data
			},
			getOrderDetail() {
				api_order.fetchOrderDetail(this.orderId).then(res => {
					if (res.code !== 200) return
					this.orderDetail = res.data
					// this.getStoreDetail(this.orderDetail.storeId)
					if (res.data.zyOrderItemList.length <= 1) {
						this.currentItem = this.orderDetail.zyOrderItemList[0]
					}
					this.getAlltime()
				})
			},
			// getStoreDetail(storeId) {
			// 	api_home.fetchShopDetail(storeId).then(res => {
			// 		if (res.code !== 200) return
			// 		this.storeDetail = res.data
			// 	})
			// },
			// 单个项目退单
			projectOutOrder(item) {
				this.applyDialog = true
				this.outOrder = item
				this.outOrderType = 'project'
			},
			confirmOutOrder() {
				if (this.outOrderType === 'project') {
					const params = {
						id: this.outOrder.id
					}
					api_order.projectChargeBack(params).then(res => {
						if (res.code !== 200) return
						uni.showToast({
							title: '退单成功!',
							icon: 'success',
							mask: true
						})
						uni.switchTab({
							url: '/pages/order/index'
						})
					})
				} else {
					const judgeChargeBack = this.outOrder.zyOrderItemList.filter(zItem => zItem.status !== 1).length
					if (judgeChargeBack) {
						uni.showToast({
							title: '订单中存在已服务项目，请与门店联系',
							icon: 'none',
							mask: true
						})
						return
					}
					api_order.chargeBack({
						id: this.outOrder.id
					}).then(res => {
						if (res.code !== 200) return
						uni.showToast({
							title: '退单成功!',
							icon: 'success',
							mask: true
						})
						uni.switchTab({
							url: '/pages/order/index'
						})
					})
				}
				this.applyDialog = false
			},
			// submitApply(){
			// 	uni.navigateTo({
			// 		url:`/subPages/order/chargeBackSuccess`
			// 	})
			// },
			isTimeInRange(time, ranges) {  
			    // 将输入时间转换为分钟表示，方便比较  
			    const inputTimeInMinutes = parseInt(time.split(':')[0]) * 60 + parseInt(time.split(':')[1]);  
			    // 遍历时间范围数组  
			    for (let range of ranges) {  
			        // 分割时间范围字符串为开始时间和结束时间  
			        const [startTime, endTime] = range.split('-');  		  
			        // 将开始和结束时间也转换为分钟表示  
			        const startTimeInMinutes = parseInt(startTime.split(':')[0]) * 60 + parseInt(startTime.split(':')[1]);  
			        const endTimeInMinutes = parseInt(endTime.split(':')[0]) * 60 + parseInt(endTime.split(':')[1]);  		  
			        // 检查输入时间是否在时间范围内  
			        if (inputTimeInMinutes >= startTimeInMinutes && inputTimeInMinutes <= endTimeInMinutes) {  
			            return true; // 时间在范围内  
			        }  
			    }  			  
			    return false; // 时间不在任何范围内  
			} 
		}
	}
</script>

<style lang="scss" scoped>
	.booking {
		margin: 30rpx;
		border-radius: 17rpx;
	}

	.btn_edit {
		position: fixed;
		width: 100%;
		bottom: 0;
		height: 148rpx;
		opacity: 1;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 13rpx #ADADAD;

		.btn_cont {
			width: 671rpx;
			height: 94rpx;
			opacity: 1;
			border-radius: 63rpx;
			background: #C27E15;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 10rpx 10rpx 10rpx 10rpx;
			font-size: 30rpx;
			font-weight: 500;
			letter-spacing: 0rpx;
			line-height: 43.44rpx;
			color: rgba(255, 255, 255, 1);
			text-align: left;
			vertical-align: top;
		}
	}

	.wdithBtn {
		width: 117rpx;
		height: 49rpx;
		color: #C27E15;
	}

	.wdithBtn1 {
		width: 117rpx;
		height: 49rpx;
		background: #C27E15;
		color: #fff;
	}

	.out-content {
		padding: 0 30rpx 40rpx;
		font-size: 28rpx;
		text-align: center;
	}
</style>